<template>
	<view class="container">
		<customNavigation title="阅读公告" src="../static/images/nav_icon_back.png" src2="../static/images/nav_icon_logo.png" color="white" background="#32A238"></customNavigation>
		<view class="main">
			<scroll-view class="contentBox" scroll-x="true" scroll-y="true">
				<view class="title">
					{{noticeDetail.title||' '}}
				</view>
				 <u-parse class="richText" :content="noticeDetail.content||' '" @preview="preview" @navigate="navigate" ></u-parse>
			</scroll-view>
		</view>
		<view class="btnList">
			<view class="btn1" @click="pre">
				上一条
			</view>
			<view class="btn2" @click="subNotice" v-if="noticeDetail.IsAffirm==true">
				确认
			</view>
			<view class="btn2" @click="next">
				下一条
			</view>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue'
	import customNavigation from "@/components/custom-navigation.vue"
	import * as api from "../../utils/controller.js"
	export default {
		components:{
			customNavigation,
			uParse
		},
		data() {
			return {
				id:"",
				list:[],
				selectIndex:0,
				noticeDetail:""
			};
		},
		onLoad(options){
			this.id=options.id
			let list=uni.getStorageSync("list")
			let selectIndex=0
			for(let i=0;i<list.length;i++){
				if(list[i].url){
					list.splice(i,1)
				}
			}
			this.list=list
			for(let j=0;j<list.length;j++){
				if(list[j].id==this.id){
					selectIndex=j
				}
			}
			this.selectIndex=selectIndex
			this.getNoticeDetail()
		},
		methods:{
			preview(src, e) {
			  // do something
			},
			navigate(href, e) {
			  // do something
			},
			//获取公告详情
			getNoticeDetail(){
				api.GetNoticeDetail({ID:this.id}).then(res=>{
					this.noticeDetail=res.data
				})
			},
			//上一页
			pre(){
				if(this.selectIndex<=0){
					
				}else{
					this.selectIndex=this.selectIndex-1
					this.id=this.list[this.selectIndex].id
					this.getNoticeDetail()
				}
			},
			//下一页
			next(){
				if(this.selectIndex>=this.list.length-1){
					
				}else{
					this.selectIndex=this.selectIndex+1
					this.id=this.list[this.selectIndex].id
					this.getNoticeDetail()
				}
			},
			
			//确认公告
			subNotice(){
				let that=this
				api.AffirmNotice({ID:this.id}).then(res=>{
					uni.showToast({
						icon:"none",
						title:"操作成功",
						duration:1500
					})
					that.getNoticeList()
				})
			},
		}
	}
</script>

<style lang="less">
page{
	padding-bottom: 225rpx;
	.container{
		width: 100%;
		height: auto;
		.main{
			width: 100%;
			height: auto;
			display: flex;
			flex-direction: column;
			margin-top: 11vh;
			.contentBox{
				width: 100%;
				min-height: 460rpx;
				margin-top: 233rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;
				box-sizing: border-box;
				.title{
					width: 100%;
					text-align: center;
					font-size: 36rpx;
					font-family: PingFangSC;
					font-weight: 500;
					color: #2A2A2A;
				}
				.richText{
					width: 100%;
					height: auto;
				}
				.content{
					font-size: 28rpx;
					font-family: PingFangSC;
					font-weight: 400;
					color: #2A2A2A;
					margin-top: 74rpx;
				}
			}
		}
		.btnList{
			width: 100%;
			height: auto;
			padding: 0 30rpx 0 30rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 147rpx;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn1{
				width: 222rpx;
				height: 72rpx;
				background: rgba(50, 162, 56, 0.1);
				border: 2rpx solid #32A238;
				border-radius: 10rpx;
				box-sizing: border-box;
				text-align: center;
				line-height: 68rpx;
				font-size: 28rpx;
				font-family: PingFangSC;
				font-weight: 400;
				color: #32A238;
			}
			.btn2{
				width: 222rpx;
				height: 72rpx;
				background: #32A238;
				border-radius: 10rpx;
				font-size: 28rpx;
				font-family: PingFangSC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
		}
	}
}
</style>
